<template>
  <div class="full-height bg-white page-content content relative-position">
    <div class="flex-1 scroll-y scrollbar padding-l-20 padding-r-20 margin-t-20 full-width margin-b-20" style="max-height: calc(100% - 82px)">
      <div class="font-size-16 text-primary padding-b-20" style="line-height: 1">基本信息</div>
      <div class="">
        <detail-dialog :headList="headList" :detailData="orderInfo" :col-number="3" class="font-size-14" :statusList="['status']">
          <template v-slot:status>
            <set-color :options="$getEnum(Enums.BUSINESS_STATUS)" :colorType="orderInfo.status" />
          </template>
        </detail-dialog>
        <detail-dialog :headList="{ remark: '转序描述'}" :detailData="{ remark: remark}" :col-number="12" class="font-size-14"/>
      </div>
      <q-table
        :data="tableData"
        :columns="tableColumns"
        row-key="number"
        id="table"
        class="myTable scroll stick-last-col stick-first-col inherit stick-last-row"
        :pagination.sync="pagination"
        style="max-height: 300px;margin: 0"
        :hide-bottom="!!tableData.length"
      >
        <template v-slot:body-cell-productStandard="props">
          <td style="text-align: left">
            <td-spec :rowData="props.row" v-if="!props.row.isSum"/>
          </td>
        </template>
        <template v-slot:body-cell-finishedCount="props">
          <q-td style="width: 50px">
            <div v-if="props.row.isSum" style="padding-left: 10px">{{props.row.finishedCount}}</div>
            <q-btn flat
                   color="primary"
                   :label="props.row.finishedCount"
                   class="table-flat-btn"
                   :disable="!props.row.finishedCount"
                   v-else
                   @click="showCompleteDetails(props.row)" />
          </q-td>
        </template>
        <template v-slot:body-cell-defectiveCount="props">
          <q-td style="width: 50px">
            <div v-if="props.row.isSum" style="padding-left: 10px">{{props.row.defectiveCount}}</div>
            <q-btn flat
                   color="primary"
                   :label="props.row.defectiveCount"
                   class="table-flat-btn"
                   v-else
                   :disable="!props.row.defectiveCount"
                   @click="showbadDetails(props.row)" />
          </q-td>
        </template>
        <template v-slot:body-cell-operate="props">
          <q-td style="width: 50px">
            <table-btn btnType="detail" v-if="!props.row.isSum" @click="showDetail(props.row)"/>
          </q-td>
        </template>
      </q-table>
      <div class="font-size-16 text-primary padding-b-20 padding-t-20" style="line-height: 1">处理进程</div>
      <q-table
        :data="logsData"
        :columns="logsColumns"
        row-key="number"
        id="table"
        class="myTable scroll inherit"
        :pagination.sync="pagination"
        style="max-height: 300px;margin: 0"
        :hide-bottom="!!logsData.length"
      />
    </div>
    <div class="dialog-footer text-center padding-b-20 absolute-bottom-left full-width" style="border-top: 1px solid #d3d3d3;padding-top: 10px">
      <q-btn
        outline
        label="返回"
        color="primary"
        @click="onBcak"
        class="qa-btn margin-r-20"
      />
    </div>
    <work-order-details ref="workOrderDetails"/>
    <complete-detail ref="completeDetail"/>
    <bad-detail ref="badDetail"/>
  </div>
</template>

<script>
import storage from 'good-storage'
import _ from 'lodash'
import { orderLogs, getOrderDetail } from 'src/boot/job/process-order'
import moment from 'moment'
import WorkOrderDetails from './components/work-order/order-details'
import completeDetail from './components/work-order/complete-detail'
import badDetail from './components/work-order/bad-detail'
import BACKMIXIN from 'src/components/basic-mixins/back-mixin'

export default {
  name: 'process-order-detail',
  components: { WorkOrderDetails, completeDetail, badDetail },
  mixins: [BACKMIXIN],
  data () {
    return {
      paramsBuffer: {}, // 缓存区
      headList: {
        status: '工单状态',
        scheduledDate: '派工日期',
        deviceName: '设备名称',
        deviceNumber: '设备编号',
        startTime: '计划开工',
        endTime: '计划完工',
        actualStartTime: '实际开工',
        actualEndTime: '实际完工'
      },
      orderInfo: {
        status: '--',
        scheduledDate: '--',
        deviceName: '--',
        deviceNumber: '--',
        startTime: '--',
        endTime: '--',
        actualStartTime: '--',
        actualEndTime: '--'
      }, // 目标单元格信息
      remark: '--',
      pagination: {
        rowsPerPage: 0
      },
      // 表格头部数据
      tableColumns: [
        { label: '加工产品', align: 'left', field: 'productNameNumber', name: 'productNameNumber' },
        { label: '产品规格', align: 'left', field: 'productStandard', name: 'productStandard' },
        { label: '加工工序', align: 'left', field: 'processSort', name: 'processSort' },
        { label: '订单号', align: 'left', field: 'orderNumber', name: 'orderNumber' },
        { label: '批次号', align: 'left', field: 'orderBatch', name: 'orderBatch' },
        { label: '派工数量', align: 'left', field: 'jobCount', name: 'jobCount' },
        { label: '完工数量', align: 'left', field: 'finishedCount', name: 'finishedCount' },
        { label: '不良数量', align: 'left', field: 'defectiveCount', name: 'defectiveCount' },
        { label: '关联信息', align: 'center', field: 'operate', name: 'operate' }
      ],
      logsColumns: [
        { name: 'id', label: '操作记录编号', align: 'left', field: 'id' },
        { name: 'workOrderId', label: '工单编号', align: 'left', field: 'workOrderId' },
        { name: 'operator', label: '操作员', align: 'left', field: 'operator' },
        { name: 'time', label: '操作时间', align: 'left', field: 'time' },
        { name: 'operation', label: '操作类型', align: 'left', field: 'operation' }
      ],
      logsData: [],
      // 表格内容
      tableData: []
    }
  },
  methods: {
    initParams (params) {
      this.paramsBuffer = _.cloneDeep(params)
      this.getOrderDetail(params.id)
      this.getOrderLogs(params.id)
    },
    // 获取工单详情
    getOrderDetail (id) {
      this.$q.loading.show()
      // const res = dispatch.getOrderDetail()
      getOrderDetail(id).then(res => {
        let tableData = []
        this.orderInfo.status = res.isSuspend ? 13 : res.groupOrderStatus
        this.orderInfo.deviceName = this.$utils.label(res.deviceName)
        this.orderInfo.deviceNumber = this.$utils.label(res.deviceNumber)
        this.orderInfo.startTime = res.startTime ? moment(res.startTime).format('YYYY-MM-DD HH:mm:ss') : '--'
        this.orderInfo.endTime = res.endTime ? moment(res.endTime).format('YYYY-MM-DD HH:mm:ss') : '--'
        this.orderInfo.scheduledDate = moment(res.scheduledDate).format('YYYY-MM-DD')
        this.orderInfo.actualStartTime = res.actualStartTime ? moment(res.actualStartTime).format('YYYY-MM-DD HH:mm:ss') : '--'
        this.orderInfo.actualEndTime = res.actualEndTime ? moment(res.actualEndTime).format('YYYY-MM-DD HH:mm:ss') : '未完工'
        this.remark = this.$utils.label(res.comments)
        if (res.workOrders.length) {
          res.workOrders.forEach(item => {
            item.productNameNumber = `${this.$utils.label(item.materialName)}(${this.$utils.label(item.materialNumber)})`
            item.processSort = `${item.processSort + 1}-${this.$utils.label(item.processName)}`
            item.orderNumber = this.$utils.label(item.orderNumber)
            item.orderBatch = this.$utils.label(item.orderBatch)
            item.jobCount = this.$utils.label(item.jobCount)
            item.finishedCount = this.$utils.label(item.finishedCount)
            item.defectiveCount = this.$utils.label(item.defectiveCount)
          })
          tableData = _.cloneDeep(res.workOrders)
          const jobCount = _.sumBy(res.workOrders, 'jobCount')
          const finishedCount = _.sumBy(res.workOrders, 'finishedCount')
          const defectiveCount = _.sumBy(res.workOrders, 'defectiveCount')
          tableData.push({
            productNameNumber: '合计',
            jobCount: jobCount,
            finishedCount: finishedCount,
            defectiveCount: defectiveCount,
            isSum: true
          })
        }
        this.tableData = tableData
      }).finally(() => {
        this.$q.loading.hide()
      })
    },
    // 获取处理进程
    getOrderLogs (id) {
      orderLogs(id).then(res => {
        res.data.forEach((o, i) => {
          o.id = i + 1
          o.time = moment(o.time).format('YYYY-MM-DD HH:mm:ss')
          o.operation = this.$valueToEnum(this.Enums.WORK_ORDER_OPERATIONS, o.operation).desc
        })
        this.logsData = res.data
      })
    },
    showDetail (data) {
      console.log(123)
      this.$refs.workOrderDetails.assignment(data, this.paramsBuffer)
    },
    showCompleteDetails (data) {
      this.$refs.completeDetail.openCompleteDetails(data.id)
    },
    showbadDetails (data) {
      this.$refs.badDetail.openBadDetails(data.id)
    },
    onBcak () {
      this.goPath('process-order-detail', '/main/craft/process-order')
    }
  },
  beforeRouteEnter (to, from, next) {
    to.name === 'processOrderDetail' && next(vm => {
      from.name === 'processOrder' && vm.$route.params.id && vm.initParams(vm.$route.params)
      from.name === null && vm.initParams(storage.get('processOrderDetail'))
      storage.remove('processOrderDetail')
    })
  },
  mounted () {
    window.addEventListener('beforeunload', e => {
      this.$route.name === 'processOrderDetail' && storage.set('processOrderDetail', this.paramsBuffer)
    })
  }
}
</script>

<style scoped lang="stylus">
>>>.stick-last-row .q-table tbody tr:last-child td{
  background-color #f9f9f9
}
>>>.stick-first-col tbody tr:last-child td:first-child{
  z-index 8 !important
}
</style>
